<template>
  <el-dialog
    :modal="false"
    :title="calcTitle"
    append-to-body
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    width="500px"
  >
    <el-form
      ref="form"
      :disabled="openType === 'readonly'"
      class="flex flex-col items-center"
      :model="form"
      :rules="rules"
      inline
      @submit.native.prevent
    >
      <el-form-item
        style="width: 100%"
        label="通知对象"
        label-width="120px"
        prop="notifyObject"
      >
        <el-radio
          v-model="form.notifyObject"
          :label="0"
        >
          全体用户
        </el-radio>
        <el-radio
          v-model="form.notifyObject"
          :label="1"
        >
          指定公司
        </el-radio>
      </el-form-item>
      <div
        v-if="form.notifyObject"
        class="company-wrapper"
      >
        <el-button
          size="mini"
          class="btn"
          @click="handleAddCompany"
        >
          添加公司
        </el-button><span
          style="margin-left: 10px"
        >已添加 {{ oCompanyList.length }} 家</span>
        <span
          v-if="oCompanyList.length > 5"
          style="color: #006aff; margin-left: 10px"
          class="cursor-pointer"
          @click="handleSeeFullList"
        >查看完整列表</span>
        <el-table
          v-show="oCompanyList.length"
          ref="oTable"
          :data="oCompanyListSlice"
          style="width: 100%; margin-top: 10px"
          row-key="corpId"
        >
          <el-table-column
            width="93px"
            prop="name"
            label="企业名称"
          >
            <template #default="{ row }">
              <div
                class="t-row-c"
                :title="row.name"
              >
                {{ row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            width="93px"
            prop="qdCompanyName"
            label="企业简称"
          >
            <template #default="{ row }">
              <div
                class="t-row-c"
                :title="row.qdCompanyName"
              >
                {{ row.qdCompanyName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="enableAppTotal"
            width="93px"
            label="启用人数"
          >
            <template #default="{ row }">
              <div
                class="t-row-c"
                :title="row.enableAppTotal"
              >
                {{ row.enableAppTotal }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="60px"
          >
            <template slot-scope="scope">
              <div
                class="btn-del"
                @click="deleteOneComp(scope)"
              >
                删除
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-form-item
        style="width: 100%"
        label="消息类型"
        label-width="120px"
        prop="messageType"
      >
        <el-radio
          v-model="form.messageType"
          :label="0"
        >
          系统公告
        </el-radio>
        <el-radio
          v-model="form.messageType"
          :label="1"
        >
          新功能介绍
        </el-radio>
      </el-form-item>
      <el-form-item
        style="width: 100%"
        label="通知方式"
        label-width="120px"
        prop="notifyMethod"
      >
        <el-tooltip
          class="item"
          effect="dark"
          transition="none"
          :disabled="openType === 'readonly'"
          content="修改通知方式/消息形式会清空下面已填写内容！"
          placement="right-start"
        >
          <div>
            <el-radio
              v-model="form.notifyMethod"
              style="margin-right: 44px"
              :label="0"
            >
              推送号
            </el-radio>
            <el-radio
              v-model="form.notifyMethod"
              :label="1"
            >
              弹框
            </el-radio>
          </div>
        </el-tooltip>
      </el-form-item>
      <el-form-item
        v-if="form.notifyMethod"
        style="width: 100%; height: 40px; margin-top: 10px"
        label="到期时间"
        label-width="120px"
        prop="expirationDate"
      >
        <el-date-picker
          v-model="form.expirationDate"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
        />
      </el-form-item>
      <el-form-item
        v-if="form.notifyMethod"
        style="width: 100%; height: 420px; margin-top: 10px"
        label="文本内容"
        label-width="120px"
        prop="content"
      >
        <el-input
          v-model="form.content"
          style="width: 320px"
          type="textarea"
          maxlength="100"
          :rows="8"
          show-word-limit
          resize="none"
        />
        <div class="italic text-xs">
          *支持html语法，下框预览
        </div>
        <div
          class="preview-wrapper"
          v-html="form.content"
        />
      </el-form-item>
      <template v-else>
        <el-form-item
          style="width: 100%; height: 80px"
          label="消息形式"
          label-width="120px"
          prop="messageForm"
        >
          <el-radio
            v-model="form.messageForm"
            style="margin-right: 44px"
            :label="1"
          >
            纯文本
          </el-radio>
          <el-radio
            v-model="form.messageForm"
            :label="3"
          >
            图文结构化
          </el-radio>
          <br>
          <el-radio
            v-model="form.messageForm"
            style="margin-right: 44px"
            :label="2"
          >
            纯图片
          </el-radio>
          <el-radio
            v-model="form.messageForm"
            :label="4"
          >
            多图文消息
          </el-radio>
        </el-form-item>
        <el-form-item
          v-if="form.messageForm == 1"
          style="width: 100%; height: 140px"
          label="文本内容"
          label-width="120px"
          prop="content"
        >
          <el-input
            v-model="form.messageParams[0].content"
            style="width: 320px"
            type="textarea"
            maxlength="100"
            :rows="5"
            show-word-limit
            resize="none"
          />
        </el-form-item>
        <template v-else-if="[2, 3].includes(form.messageForm)">
          <el-form-item
            style="width: 100%; height: 50px"
            label="标题"
            label-width="120px"
            prop="messageParams[0].title"
          >
            <el-input
              v-model="form.messageParams[0].title"
              style="width: 300px"
              maxlength="20"
            />
          </el-form-item>
          <el-form-item
            v-if="form.messageForm == 3"
            style="width: 100%; height: 50px"
            label="内容"
            label-width="120px"
            prop="messageParams[0].content"
          >
            <el-input
              v-model="form.messageParams[0].content"
              style="width: 300px"
              maxlength="50"
            />
          </el-form-item>
          <el-form-item
            v-if="form.messageForm == 3"
            style="width: 100%; height: 50px"
            label="链接"
            label-width="120px"
            prop="messageParams[0].linkUrl"
          >
            <el-input
              v-model="form.messageParams[0].linkUrl"
              style="width: 300px"
              maxlength="200"
            />
          </el-form-item>
          <el-form-item
            :style="`width: 100%; height:${
              form.messageParams[0].picUrl ? '160px' : '50px'
            }`"
            style="width: 100%; height: 50px"
            label="图片链接"
            label-width="120px"
            prop="messageParams[0].picUrl"
          >
            <div
              class="flex"
              style="width: 300px"
            >
              <el-input
                v-model="form.messageParams[0].picUrl"
                class="flex1"
                placeholder="* 图片长宽比为16:9"
              />
              <div
                class="hint-text"
                @click="handleSeeHint"
              >
                如何生成图片链接
              </div>
            </div>
            <div
              v-if="form.messageParams[0].picUrl"
              class="flex"
            >
              <el-image
                fit="contain"
                style="
                                    width: 100px;
                                    height: 100px;
                                    margin: 10px 0 10px 0;
                                "
                :src="form.messageParams[0].picUrl"
              />
              <div
                style="
                                    height: 100px;
                                    width: 190px;
                                    margin: 20px 0 0 10px;
                                    font-size: 10px;
                                    line-height: 16px;
                                "
              >
                左侧为图片链接测试，如果显示"未经允许不可引用"，是因为图片提供方配置了防盗链，是正常现象。如果显示"加载失败"，则链接无效，请检查链接。
              </div>
            </div>
          </el-form-item>
          <!-- <el-form-item
                        :style="`width: 100%; height:${
                            form.messageParams[0].picUrl ? '160px' : '50px'
                        }`"
                        label="图片"
                        label-width="120px"
                        prop="messageParams[0].picUrl"
                    >
                        <div class="flex relative">
                            <el-image
                                v-if="form.messageParams[0].picUrl"
                                fit="contain"
                                style="
                                    width: 100px;
                                    height: 100px;
                                    margin: 0 0 10px 0;
                                "
                                :src="form.messageParams[0].picUrl"
                            >
                            </el-image>
                        </div>
                        <el-upload
                            action
                            :http-request="uploadFunc"
                            :show-file-list="false"
                        >
                            <el-button size="small" type="primary">{{
                                form.messageParams[0].picUrl
                                    ? '替换图片'
                                    : '上传图片'
                            }}</el-button>
                        </el-upload>
                    </el-form-item> -->
        </template>
        <template v-else-if="form.messageForm == 4">
          <div
            v-for="(item, index) in form.messageParams"
            :key="index"
            class="inner-area"
          >
            <i
              v-if="index && openType !== 'readonly'"
              class="el-icon-circle-close"
              @click="handleDeleteBlock(index)"
            />
            <el-form-item
              style="width: 100%; height: 50px"
              label="标题"
              label-width="120px"
              prop="messageParams[0].title"
            >
              <el-input
                v-model="item.title"
                style="width: 300px"
                maxlength="20"
              />
            </el-form-item>
            <el-form-item
              style="width: 100%; height: 50px"
              label="链接"
              label-width="120px"
              prop="messageParams[0].linkUrl"
            >
              <el-input
                v-model="item.linkUrl"
                style="width: 300px"
                maxlength="200"
              />
            </el-form-item>
            <el-form-item
              :style="`width: 100%; height:${
                item.picUrl ? '160px' : '50px'
              }`"
              style="width: 100%; height: 50px"
              label="图片链接"
              label-width="120px"
              prop="messageParams[0].picUrl"
            >
              <div
                class="flex"
                style="width: 300px"
              >
                <el-input
                  v-model="item.picUrl"
                  class="flex1"
                  placeholder="* 图片长宽比为16:9"
                />
                <div
                  class="hint-text"
                  @click="handleSeeHint"
                >
                  如何生成图片链接
                </div>
              </div>
              <div
                v-if="item.picUrl"
                class="flex"
              >
                <el-image
                  fit="contain"
                  style="
                                        width: 100px;
                                        height: 100px;
                                        margin: 10px 0 10px 0;
                                    "
                  :src="item.picUrl"
                />
                <div
                  v-if="!index"
                  style="
                                        height: 100px;
                                        width: 190px;
                                        margin: 20px 0 0 10px;
                                        font-size: 10px;
                                        line-height: 16px;
                                    "
                >
                  左侧为图片链接测试，如果显示"未经允许不可引用"，是因为图片提供方配置了防盗链，是正常现象。如果显示"加载失败"，则链接无效，请检查链接。
                </div>
              </div>
            </el-form-item>
            <!-- <el-form-item
                            :style="`width: 100%; height:${
                                item.picUrl ? '160px' : '50px'
                            }`"
                            label="图片"
                            label-width="120px"
                            prop="messageParams[0].picUrl"
                        >
                            <div class="flex relative">
                                <el-image
                                    v-if="item.picUrl"
                                    fit="contain"
                                    style="
                                        width: 100px;
                                        height: 100px;
                                        margin: 0 0 10px 0;
                                    "
                                    :src="item.picUrl"
                                >
                                </el-image>
                            </div>
                            <el-upload
                                action
                                :http-request="(val) => uploadFunc(val, index)"
                                :show-file-list="false"
                            >
                                <el-button size="small" type="primary">{{
                                    item.picUrl ? '替换图片' : '上传图片'
                                }}</el-button>
                            </el-upload>
                        </el-form-item> -->
          </div>
        </template>
      </template>
      <div
        v-if="openType !== 'readonly'"
        class="text-center"
      >
        <el-button
          class="w-24"
          @click="handleCancel"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          class="w-24"
          @click="handleSubmit"
        >
          保存
        </el-button>
        <el-button
          v-if="form.messageForm == 4"
          type="primary"
          class="w-32"
          @click="addBlock"
        >
          添加图文块
        </el-button>
      </div>
    </el-form>
    <div
      v-if="openType == 'readonly'"
      class="text-center"
    >
      <el-button
        class="w-24"
        @click="handleCancel"
      >
        关闭
      </el-button>
    </div>
    <el-dialog
      width="500px"
      title="添加公司"
      :visible.sync="innerVisible"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="add-com-wrapper">
        <div class="search-line flex">
          <div class="search-item flex flex1 rrx">
            <div
              class="label"
              style="width: 120px"
            >
              企业名称
            </div>
            <el-input
              v-model="OriginCompanyForm.companyName"
              size="small"
              class="flex1"
            />
          </div>
          <div class="search-item flex flex1">
            <div
              class="label"
              style="width: 120px"
            >
              企业简称
            </div>
            <el-input
              v-model="OriginCompanyForm.qdCompanyName"
              size="small"
              class="flex1"
            />
          </div>
        </div>
        <div
          class="search-line flex justify-end"
          style="margin-top: 10px"
        >
          <el-button
            type="primary"
            size="mini"
            @click="handleCompanySearch"
          >
            查询
          </el-button>
          <el-button
            size="mini"
            @click="handleCompanyReset"
          >
            重置
          </el-button>
        </div>
        <el-table
          ref="cTable"
          :data="cList"
          style="width: 100%; margin-top: 10px"
          row-key="corpId"
          @selection-change="cTableChange"
        >
          <el-table-column
            reserve-selection
            type="selection"
            width="55"
          />
          <el-table-column
            prop="name"
            label="企业名称"
          />
          <el-table-column
            prop="qdCompanyName"
            label="企业简称"
          />
          <el-table-column
            prop="enableAppTotal"
            width="80px"
            label="启用人数"
          />
        </el-table>
        <div class="text-center py-4">
          <el-pagination
            background
            :pager-count="5"
            :total="cTotal"
            :page-size="companyForm.size"
            :current-page.sync="companyForm.num"
            layout="prev, pager, next, ->, total"
            @current-change="cPageChange"
          />
        </div>
        <div class="flex justify-center">
          <el-button @click="cCancel">
            取消
          </el-button>
          <el-button
            type="primary"
            @click="cSave"
          >
            保存
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      width="500px"
      title="公司列表"
      :visible.sync="fullVis"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-table
        ref="fullTable"
        :data="oCompanyList"
        style="width: 100%"
        row-key="corpId"
      >
        <el-table-column
          prop="name"
          label="企业名称"
        />
        <el-table-column
          prop="qdCompanyName"
          label="企业简称"
        />
        <el-table-column
          prop="enableAppTotal"
          width="80px"
          label="启用人数"
        />
        <el-table-column
          label="操作"
          width="60px"
        >
          <template slot-scope="scope">
            <div
              class="btn-del"
              @click="deleteOneComp(scope)"
            >
              删除
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-center mt-4">
        <el-button
          type="primary"
          @click="fullVis = false"
        >
          关闭
        </el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import {
    addNewMessage,
    editMessage,
    uploadFileNas,
    getMessageDetail,
} from '@/api/message'
import { companyList } from '@/api/company'
export default {
    name: 'MessageDialog',
    data() {
        return {
            visible: false,
            innerVisible: false,
            fullVis: false,
            companyForm: {
                companyName: '',
                qdCompanyName: '',
                num: 1,
                size: 10,
            },
            OriginCompanyForm: {
                companyName: '',
                qdCompanyName: '',
                num: 1,
                size: 10,
            },
            cList: [],
            cTotal: 0,
            cSelect: [],
            oCompanyList: [],
            form: {
                content: '',
                messageForm: 1,
                messageParams: [
                    {
                        content: '',
                        linkUrl: '',
                        picUrl: '',
                        title: '',
                    },
                ],
                messageType: 0,
                notifyMethod: 0,
                notifyObject: 0,
                companyInfos: [],
            },
            openType: '',
            doNotChange: false,
            rules: {},
            fileArr: [],
        }
    },
    computed: {
        oCompanyListSlice() {
            return this.oCompanyList.slice(0, 5)
        },
        calcTitle() {
            const o = {
                edit: '编辑',
                add: '新增',
                readonly: '查看',
            }
            return o[this.openType]
        },
    },
    watch: {
        'form.notifyMethod'(n) {
            if (this.doNotChange) return
            if (n) {
                this.form.messageForm = 0
            } else {
                this.form.content = ''
                this.form.messageForm = 1
            }
        },
        'form.messageForm'() {
            if (this.doNotChange) return
            this.form.messageParams = [
                {
                    content: '',
                    linkUrl: '',
                    picUrl: '',
                    title: '',
                },
            ]
        },
    },
    methods: {
        handleSeeHint() {
            window.open(
                `https://filecdn.hgj.com/aides-website/admin/how-to.jpg`
            )
        },
        deleteOneComp(scope) {
            if (this.openType === 'readonly') return
            this.oCompanyList.splice(scope.$index, 1)
        },
        handleSeeFullList() {
            this.fullVis = true
        },
        cTableChange(val) {
            this.cSelect = val
        },
        cPageChange() {
            this.queryCompanyList()
        },
        cCancel() {
            this.handleCompanyReset()
            this.innerVisible = false
            this.cleanCTable()
        },
        cSave() {
            if (!this.oCompanyList.length) {
                this.oCompanyList = this.cSelect
            } else {
                let arr = []
                for (let i = 0; i < this.cSelect.length; i++) {
                    if (
                        !this.oCompanyList.filter(
                            (item) => item.corpId === this.cSelect[i].corpId
                        ).length
                    ) {
                        arr.push(this.cSelect[i])
                    }
                }
                let tmp = []
                tmp.push.apply(tmp, this.oCompanyList)
                tmp.push.apply(tmp, arr)
                this.oCompanyList = tmp
            }
            this.innerVisible = false
            this.handleCompanyReset()
            this.cleanCTable()
        },
        cleanCTable() {
            this.$refs.cTable.clearSelection()
        },
        handleCompanySearch() {
            this.companyForm = { ...this.OriginCompanyForm }
            this.queryCompanyList()
        },
        handleCompanyReset() {
            this.companyForm = {
                companyName: '',
                qdCompanyName: '',
                num: 1,
                size: 10,
            }
            this.OriginCompanyForm = {
                companyName: '',
                qdCompanyName: '',
                num: 1,
                size: 10,
            }
        },
        async showDialog(row, type) {
            this.openType = type
            if (type === 'add') {
                this.form = {
                    content: '',
                    messageForm: 1,
                    messageParams: [
                        {
                            content: '',
                            linkUrl: '',
                            picUrl: '',
                            title: '',
                        },
                    ],
                    messageType: 0,
                    notifyMethod: 0,
                    notifyObject: 0,
                    companyInfos: [],
                }
            } else {
                this.doNotChange = true
                let res = await getMessageDetail({ messageId: row.id })
                this.form = res.data
                this.oCompanyList = this.form.companyInfos
                setTimeout(() => {
                    this.doNotChange = false
                }, 0)
            }
            this.visible = true
        },
        addBlock() {
            this.form.messageParams.push({
                content: '',
                linkUrl: '',
                picUrl: '',
                title: '',
            })
        },
        async handleAddCompany() {
            this.innerVisible = true
            this.queryCompanyList()
        },
        async queryCompanyList() {
            let res = await companyList(this.companyForm)
            this.cList = res.data.records
            this.cTotal = res.data.total
        },
        handleDeleteBlock(index) {
            this.form.messageParams.splice(index, 1)
        },
        async uploadFunc(file, index) {
            const size = file.file.size / 1024
            if (size > 5 * 1024) {
                return this.$message.warning('该文件过大，请选择别的文件上传')
            }
            const f = file.file
            const f_sux_arr = f.name.split('.')
            const f_sux = f_sux_arr[f_sux_arr.length - 1]
            if (f.name.length > 50)
                return this.$message.warning(
                    '文件名过长，请改名或选择别的文件上传'
                )
            const loading = this.$loading({
                lock: true,
                spinner: 'none',
                text: '上传中，请耐心等待...',
            })
            try {
                let res = await uploadFileNas(
                    f,
                    f_sux,
                    f_sux_arr.slice(0, f_sux_arr.length - 1).join('.')
                )
                this.afterUpload(res, index)
            } catch (e) {
                console.log(e)
            } finally {
                loading.close()
            }
        },
        afterUpload(key, index) {
            const { messageParams, messageForm } = this.form
            // const prefix = !process.env.VUE_APP_UPLOAD_PREFIX ? '' : 'dev-'
            if (messageForm !== 4) {
                messageParams[0].picUrl = this.getNasFile(key)
                return
            }
            messageParams[index].picUrl = this.getNasFile(key)
        },
        getNasFile(id) {
            let prefix = process.env.VUE_APP_UPLOAD_PREFIX || ''
            return `${prefix}nas.hgj.com/proxy/${id}`
            // let baseURL =
            //     prefix == 'dev-'
            //         ? `//iter-apisix.hgj.com/whale-nas-manager-server`
            //         : `//${prefix}file-ingress.hgj.com/whale-nas-manager-server`
            // return `//${baseURL}/pass/proxy/${id}`
        },
        async handleSubmit() {
            // const valid = await this.$refs.form.validate()
            // if (!valid) return this.$message.warning('请填写必填项')
            let param = {}
            const {
                messageType,
                notifyMethod,
                messageForm,
                content,
                messageParams,
                expirationDate,
                notifyObject,
            } = this.form
            param.messageType = messageType
            param.notifyMethod = notifyMethod
            param.messageForm = messageForm
            param.notifyObject = notifyObject
            if (!messageForm) {
                param.content = content
                param.expirationDate = expirationDate
            } else {
                param.messageParams = messageParams
            }
            if (notifyObject) {
                if (!this.oCompanyList.length)
                    return this.$message.warning('请添加公司')
                param.corpIds = this.oCompanyList.map((i) => i.corpId)
            }
            const reg = /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+))(:\d+)?(\/.*)?(\?.*)?(#.*)?$/
            const reg2 = /^https?:\/\/([a-zA-Z0-9]+\.)+[a-zA-Z0-9]+/
            if (!messageForm) {
                if (!content) {
                    return this.$message.warning('请输入内容')
                }
                if (!expirationDate) {
                    return this.$message.warning('请输入内容弹框过期时间')
                }
            } else if (messageForm == 1) {
                if (!messageParams[0].content) {
                    return this.$message.warning('请输入内容')
                }
            } else if (messageForm == 2) {
                if (!messageParams[0].picUrl) {
                    return this.$message.warning('请上传图片')
                }
                if (!messageParams[0].title) {
                    return this.$message.warning('请输入标题')
                }
            } else if (messageForm == 3) {
                if (!messageParams[0].picUrl) {
                    return this.$message.warning('请上传图片')
                }
                if (!messageParams[0].title) {
                    return this.$message.warning('请输入标题')
                }
                if (!messageParams[0].linkUrl) {
                    return this.$message.warning('请输入链接')
                }
                if (!messageParams[0].content) {
                    return this.$message.warning('请输入内容')
                }
                const result1 = reg.test(messageParams[0].linkUrl)
                const result2 = reg2.test(messageParams[0].linkUrl)
                if (!result1 && !result2) {
                    return this.$message.warning(
                        '链接不合法，请输入完整链接，例如(https://www.google.com)'
                    )
                }
            } else if (messageForm == 4) {
                if (messageParams.length < 2) {
                    return this.$message.warning('多图文消息至少需要两个图文块')
                }
                for (let i = 0; i < messageParams.length; i++) {
                    if (!messageParams[i].picUrl) {
                        return this.$message.warning(
                            '所有图片都必须上传，请检查'
                        )
                    }
                    if (!messageParams[i].title) {
                        return this.$message.warning(
                            '所有标题都必须填写，请检查'
                        )
                    }
                    if (!messageParams[i].linkUrl) {
                        return this.$message.warning(
                            '所有链接都必须填写，请检查'
                        )
                    }
                    const result1 = reg.test(messageParams[0].linkUrl)
                    const result2 = reg2.test(messageParams[0].linkUrl)
                    if (!result1 && !result2) {
                        return this.$message.warning(
                            '存在链接不合法，请输入完整链接，例如(https://www.google.com)'
                        )
                    }
                }
            }
            if (this.openType === 'add') {
                await addNewMessage(param)
            } else {
                param.id = this.form.id
                await editMessage(param)
            }
            this.$message.success('操作成功')
            this.$emit('ok')
            this.handleCancel()
        },
        handleCancel() {
            this.$refs.form.resetFields()
            this.visible = false
            this.oCompanyList = []
        },
    },
}
</script>
<style lang="scss" scoped>
.text-width {
    width: 300px;
}
::v-deep {
    .el-form-item {
        margin-bottom: 0;
        line-height: 36px;
        height: 36px;
    }
    .el-form-item__content {
        line-height: 36px;
        height: 36px;
    }
    .el-form-item__label {
        padding-right: 40px;
    }
}

.inner-area {
    position: relative;
    border: 1px dashed rgb(218, 216, 216);
    padding-top: 10px;
    margin-bottom: 20px;
    .el-icon-circle-close {
        position: absolute;
        font-size: 30px;
        right: -15px;
        top: -15px;
        color: red;
        cursor: pointer;
        background: white;
    }
}
.preview-wrapper {
    overflow-x: hidden;
    overflow-y: auto;
    height: 180px;
    width: 320px;
    border: 1px solid #e5e5e5;
    padding: 10px 20px 10px 20px;
    line-height: 20px;
}
.btn-del {
    color: red;
    cursor: pointer;
}
.company-wrapper {
    width: 100%;
    padding-left: 120px;
    .t-row-c {
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
    }
}
.add-com-wrapper {
    .rrx {
        margin-right: 20px;
    }
    .search-item {
        .label {
            line-height: 32px;
        }
    }
}
.hint-text {
    cursor: pointer;
    color: #006aff;
    text-decoration: underline;
    width: 70px;
    text-align: right;
    line-height: 18px;
    font-size: 10px;
}
</style>
